<template>
    <!-- //用来放echarts图表的容器，一定要有宽高 -->
    <div
        :id="props.id"
        :style="{ width: props.width, height: props.height }"
    ></div>
</template>

<script setup>
import { nextTick, onMounted, onUnmounted, ref, defineProps, watch } from "vue";
import * as echarts from "echarts";
import { deepClone2 } from "@/utils/tool.js";

const props = defineProps({
    id: {
        type: String,
        default: "chartspie",
    },
    width: {
        type: String,
        default: "100%",
    },
    height: {
        type: String,
        default: "450px",
    },
    options: {
        type: Object,
        default: {},
    },
});

const chart = ref(null);
const saveOptions = ref({
    color: [
        "#4F9EFD",
        "#10E9E1",
        "#FFDD77",
        "#00EA9C",
        "#FF913F",
        "#FC5A5A",
        "#7662D6",
    ],
    tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
        //图例文字
        // orient: "vertical",
        // top: "13%",
        // right: 20,
        // itemWidth: 10,
        // itemHeight: 5,
        // itemGap: 10, //设置间距
        textStyle: {
            //图例文字的样式
            color: "#424F65",
            fontSize: 14,
            fontWeight: 700,
            rich: {
                //这里面的 a、b 是在formatter中定义的
                a: {
                    width: 50,
                    fontSize: 12,
                    color: "#FFF",
                },
                b: {
                    width: 90,
                    fontSize: 12,
                    align: "right",
                    color: "#FFDD77",
                },
            },
        },
        // 重写legend显示样式 legend显示内容
        // formatter: function (name) {
        //     let data = [
        //         { value: 10, name: "已完成" },
        //         { value: 30, name: "未完成" },
        //     ];
        //     let total = 0;
        //     let tarValue = 0;
        //     for (let i = 0, l = data.length; i < l; i++) {
        //         total += data[i].value;
        //         if (data[i].name == name) {
        //             tarValue = data[i].value;
        //         }
        //     }
        //     let p = ((tarValue / total) * 100).toFixed(2);
        //     return ["{a|" + name + "}{b|" + (p ? parseFloat(p) : 0) + "%}"];
        // },
    },
    series: [
        {
            // name: '访问来源',
            name: "提示：",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "50%"], //环形图--显示位置
            label: {
                // 设置标签显示信息和格式
                show: true,
                position: "outer",
                fontSize: 16,
                color: "#1d1d1d",
                // formatter: "{b}{c}\n{d}%",
                formatter: "{b}\n{d}%",
            },
            data: [
                { value: 10, name: "已完成" },
                { value: 20, name: "未完成" },
            ],
        },
    ],
});

// 初始化echart图表
const initChart = () => {
    let dom = document.getElementById(props.id);
    chart.value = echarts.init(dom);
    chart.value.setOption(saveOptions.value);
};

watch(
    () => props.options,
    () => {
        saveOptions.value = deepClone2(props.options);
    }
);

onMounted(() => {
    nextTick(() => {
        initChart();
    });
});

onUnmounted(() => {
    if (!chart.value) return;
    chart.value.dispose();
    chart.value = null;
});
</script>

<style lang="scss" scoped>
</style>